<!--  -->
<template>
  <el-dialog
    :title="dialogTitle"
    :visible="isShow"
    :width="handleScreenWidthToVw(574) + 'px'"
    :before-close="handleClose"
    :close-on-click-modal="false"
  >
    <div class="dialog-container">
      <div class="dialog-children dialog-upload-container">
        <upload-img is-show-tip tip-text="上传车牌照" @success="handleSuccess">
          <div class="upload-info">
            <img v-if="imageUrl" :src="imageUrl" class="avatar" :limit="1" />
            <i v-else class="el-icon-plus avatar-uploader-icon" />
          </div>
          <template v-slot:tip>
            <div class="el-upload__tip">上传车牌照</div>
          </template>
        </upload-img>
      </div>
      <div class="dialog-children flex-sub dialog-form-container">
        <el-form
          ref="ruleForm"
          :model="ruleForm"
          :rules="rules"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="车牌号" prop="carNo">
            <el-input v-model="ruleForm.carNo" class="form-input" />
          </el-form-item>

          <el-form-item label="车主名称" prop="personName">
            <el-select
              v-model="ruleForm.personName"
              class="form-input"
              filterable
              remote
              reserve-keyword
              placeholder="请输入关键词"
              :remote-method="handleRemoteMethod"
              :loading="searchLoading"
            >
              <el-option
                v-for="item in personList"
                :key="item.id"
                :label="item.name"
                :value="item.name"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="备注" prop="remark">
            <el-input v-model="ruleForm.remark" class="form-input" type="textarea" :rows="2" />
          </el-form-item>
        </el-form>
      </div>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button :loading="isLoading" type="primary" size="small" @click="handleSubmit">
        提交
      </el-button>
      <el-button size="small" @click="handleClose">取 消</el-button>
    </span>
  </el-dialog>
</template>

<script>
import UploadImg from '@/components/upload-img/index'
import { handleScreenWidthToVw, handleImage } from '@/utils/tools'
import { findRecordsPersonPageByParam } from '@/views/personnel/api'
import { MAX_INTEGER } from '@/consts'

export default {
  components: { UploadImg },
  props: {
    isShow: { type: Boolean, default: false },
    initData: { type: Object, default: () => {} },
  },
  data() {
    return {
      imageUrl: '',
      ruleForm: {},
      fileList: [],
      title: '创建',
      isLoading: false,
      searchLoading: false,
      personList: [],
    }
  },

  computed: {
    rules() {
      return {
        carNo: [{ required: true, message: '请输入车牌号码', trigger: 'change' }],
        personName: [{ required: true, message: '请选择人员', trigger: 'change' }],
      }
    },
    dialogTitle() {
      return `${this.title}车辆`
    },
    handleScreenWidthToVw() {
      return handleScreenWidthToVw
    },
  },

  watch: {
    initData: {
      immediate: true,
      deep: true,
      handler: function (value) {
        this.isLoading = false
        if (typeof value === 'object') {
          this.ruleForm = { ...value }
          value.id && (this.title = '修改')
          this.imageUrl = ''
          this.fileList = []
          this.ruleForm.fileId && (this.imageUrl = handleImage(this.ruleForm.fileId))

          this.$nextTick(() => {
            this.$refs.ruleForm && this.$refs.ruleForm.clearValidate()
          })
        }
      },
    },
  },

  methods: {
    handleClose() {
      this.$emit('close')
    },
    handleSuccess(fileList) {
      this.imageUrl = fileList[fileList.length - 1].url
      this.fileList = [fileList[fileList.length] - 1]
      this.ruleForm.fileId = fileList[fileList.length - 1].fileId
    },
    handleSubmit() {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          this.isLoading = true

          this.$emit('submit', this.ruleForm)
        }
      })
    },

    handleCloseLoading() {
      this.isLoading = false
    },
    async handleRemoteMethod(query) {
      if (!query) {
        return (this.personList = [])
      }
      this.searchLoading = true
      try {
        const res = await findRecordsPersonPageByParam({
          pageNo: 1,
          pageSize: MAX_INTEGER,
          recordsPersonVo: { identityEnum: this.ruleForm.identityEnum },
          keyword: query,
        })

        this.personList = res.records || []
      } catch (error) {
        console.log(`findRecordsPersonPageByParam error ${error}`)
      } finally {
        this.searchLoading = false
      }
    },
  },
}
</script>
<style lang="scss" scoped>
::v-deep .el-dialog__footer {
  // background: #f0f4f8;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.dialog-container {
  display: flex;
  flex-direction: row;
}

.dialog-children {
  flex-shrink: 0;
}

.upload-info {
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

.avatar-uploader-icon {
  width: vw(160px);
  height: vw(160px);
  font-size: vw(28px);
  line-height: vw(160px);
  color: #8c939d;
  text-align: center;
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
}

.avatar {
  display: block;
  width: vw(160px);
  height: vw(160px);
  border-radius: 50%;
}

.el-upload__tip {
  width: 100%;
  margin-top: vh(20px);
  font-size: vw(14px);
  color: #333;
  text-align: center;
}

::v-deep .el-form-item {
  margin-bottom: vh(20px) !important;
}

::v-deep .el-form-item__error {
  padding-top: 0;
}

.dialog-upload-contaienr {
  margin-top: vh(14px);
  margin-left: vw(16px);
}

.dialog-form-contaienr {
  margin-left: vw(80px);
}

.form-input {
  width: vw(220px);
}
</style>
